<template>
  <c-dialog ref="dialog" :data="selData" single title="安排验收" @close="closeHandle">
    <c-list ref="form" :column="2" :model="formData" :rules="formRules" label-width="120px">
      <c-list-item label="验收任务号" :value="detail.acceptTaskCode" />
      <c-list-item label="所属门店" :value="detail.shopName" />
      <c-list-item label="验收类型" :value="detail.acceptType" dict-type-code="ACCEPT_TYPE" />
      <c-list-item label="审核结果" prop="agreeAccept">
        <el-select
          v-model="formData.agreeAccept"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in auditOptions"
            :key="item.dictCode"
            :label="item.dictName"
            :value="item.dictCode"
          />
        </el-select>
      </c-list-item>
      <c-list-item v-show="formData.agreeAccept===0" prop="acceptRemark" :span="2" label="备注">
        <el-input v-model="formData.acceptRemark" size="mini" type="textarea" />
      </c-list-item>
      <c-list-item v-show="formData.agreeAccept" :rules="[{ required: formData.agreeAccept, message: '请选择验收专员', trigger: 'change' }]" :span="2" label="验收专员" prop="accepterCode">
        <input-with-dialog
          v-model="accepter"
          :props="{label:'userName',value:'account'}"
          multiple
          :config="{
            title:'验收专员',
            width:'600px',
            interfacePath:`/slm-admin/api/v1/user/listUsers`,
            method:'post',
            filtersRaw:[],
            paramsRaw:{},
            setting:[
              {prop:'account',title:'编码'},
              {prop:'userName',title:'名称'}
            ]
          }"
          @change="handleChangeAccepter"
        />
      </c-list-item>
      <c-list-item v-show="formData.agreeAccept" :span="2" label="验收专员部门">
        {{ orgInfo }}
      </c-list-item>
      <c-list-item v-show="formData.agreeAccept" :rules="[{ required: formData.agreeAccept, message: '请选择预计验收时间', trigger: 'change' }]" label="预计验收时间" prop="exceptAcceptTime">
        <el-date-picker
          v-model="formData.exceptAcceptTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          clearable
        />
      </c-list-item>

      <c-list-item>
        <div class="btn-container">
          <c-button @click="clickCancelHandle">取消</c-button>
          <c-button type="primary" @click="clickConfirmHandle">确认</c-button>
        </div>
      </c-list-item>
    </c-list>
  </c-dialog>
</template>
<script>
import { postArrangeAccept } from '@/api/check'
import { getOrgByAccount } from '@/api/common'

export default {
  name: 'PlanCheck',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      orgInfo: '',
      accepter: [],
      auditOptions: [{ dictName: '同意', dictCode: 1 }, { dictName: '不同意', dictCode: 0 }],
      formData: {
        accepterCode: '',
        accepterName: '',
        exceptAcceptTime: '',
        acceptRemark: '',
        agreeAccept: undefined
      },
      formRules: {
        // accepterCode: [{ required: true, message: '请选择验收专员', trigger: 'change' }],
        // exceptAcceptTime: [{ required: true, message: '请选择预计验收时间', trigger: 'change' }],
        agreeAccept: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  computed: {
    detail() {
      return this.selData.length > 0 ? this.selData[0] : {}
    }
  },
  methods: {
    handleChangeAccepter(data) {
      this.orgInfo = ''
      if (data.length > 0) {
        this.$set(this.formData, 'accepterCode', data.map(v => v.account).join(','))
        this.$set(this.formData, 'accepterName', data.map(v => v.userName).join(','))
        data.forEach(el => {
          getOrgByAccount(el.account).then(res => {
            if (res.success === 1) {
              if (res.data.length !== 0) {
                const list = res.data.map(el => el.orgName)
                this.orgInfo = this.orgInfo + '【' + list.join(',') + '】,'
              }
            }
          })
        })
      } else {
        this.$set(this.formData, 'accepterCode', '')
        this.$set(this.formData, 'accepterName', '')
      }
    },
    changeData(data) {
      if (!data.account) return
      getOrgByAccount(data.account).then(res => {
        if (res.success === 1) {
          if (res.data.length !== 0) {
            const list = res.data.map(el => el.orgName)
            this.orgInfo = list.join(',')
          }
        }
      })
    },
    clickConfirmHandle() {
      return this.$refs.form.validate().then(() => {
        if (!this.formData.agreeAccept) {
          delete this.formData.accepterCode
          delete this.formData.accepterName
          delete this.formData.exceptAcceptTime
        } else {
          delete this.formData.acceptRemark
        }
        const data = {
          ...this.formData,
          id: this.detail.id
        }
        return postArrangeAccept(data).then(res => {
          this.$message.success('操作成功！')
          this.$emit('on-success')
          this.$refs.dialog.visible = false
        })
      })
    },
    closeHandle() {
      this.orgInfo = ''
      this.formData = {
        accepterCode: '',
        accepterName: '',
        exceptAcceptTime: '',
        acceptRemark: '',
        agreeAccept: undefined
      }
      this.accepter = []
    },
    clickCancelHandle() {
      this.$refs.dialog.visible = false
      this.orgInfo = ''
      this.formData = {
        accepterCode: '',
        accepterName: '',
        exceptAcceptTime: '',
        acceptRemark: '',
        agreeAccept: undefined
      }
      this.accepter = []
    }
  }
}
</script>
